import React, { useEffect, useState } from 'react'
import http from '../../utils/http'
import styles from './index.module.css'
import { NavBar, Switch, Tag, InfiniteScroll, PullToRefresh, List } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'

function Index() {
  const navigate = useNavigate()
  const [sq] = useSearchParams()
  const start = sq.get('start')
  const end = sq.get('end')
  const date = sq.get('date')
  const [isSeat, setIsSeat] = useState(false)
  const [isSpeed, setIsSpeed] = useState(false)
  const [isDesc, setIsDesc] = useState(false)
  const [hasMore, setHasMore] = useState(true)
  const [page, setPage] = useState(1)
  const [list, setList] = useState([])

  const getList = async () => {
    const res = await http.post('/api/trip/train', {
      start,
      end,
      date,
      page,
      isSeat,
      isSpeed,
      isDesc
    })

    console.log(res);

    const { code, data } = res.data

    if (code === 200) {
      setList([...list, ...data])
      setPage((prev) => prev + 1)
    }

    if (data.length === 0) {
      setHasMore(false)
    }
  }

  useEffect(() => {
    getList()
  }, [])

  const onRefresh = async () => {
    setHasMore(true)
    setPage(1)
    setList([])
  }
  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>{start} - {end}</NavBar>
      <div>
        <PullToRefresh
          onRefresh={onRefresh}
        >
          <List style={{ minHeight: '100vh' }}>
            {
              list?.map((item, ind) => (
                <div key={ind} className={styles.box_wroe}>
                  <div className={styles.data_wroe}>
                    <span>{item.startTime}</span>
                    <p>24:00:00</p>
                  </div>
                  <div className={styles.data_wroe}>
                    <span>{item.start}</span>
                    <p>{item.end}</p>
                  </div>
                  <div className={styles.data_wroe}>
                    <span>G103</span>
                    <p>4时29分</p>
                  </div>
                  <div className={styles.tick_wroe}>
                    <span>￥{item.tick.secondTick}</span>
                    <p><Tag color='success'>{item.isSeat ? '有票' : '无票'}</Tag></p>
                    <p><Tag color='warning'>{item.isSpeed ? '高铁' : '火车'}</Tag></p>
                  </div>
                </div>
              ))
            }
            <InfiniteScroll loadMore={getList} hasMore={hasMore} />
          </List>
        </PullToRefresh>


      </div>
      <div className={styles.bottom_wroe}>
        <div className={styles.swc_wroe}>
          <Switch
            checked={isSeat}
            onChange={(val) => {
              setIsSeat(val)
              setPage(1)
              setList([])
            }}
          />
          是否有票
        </div>
        <div className={styles.swc_wroe}>
          <Switch
            checked={isSpeed}
            onChange={(val) => {
              setIsSpeed(val)
              setPage(1)
              setList([])
            }}
          />
          是否高铁
        </div>
        <div className={styles.swc_wroe}>
          <Switch
            checked={isDesc}
            onChange={(val) => {
              setIsDesc(val)
              setPage(1)
              setList([])
            }}
          />
          升序降序
        </div>
      </div>
    </div>
  )
}

export default Index
